/* ===== RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  outline: none;
}
/* ================== */

$box-shadow-offset: 10px;
$box-shadow-blur: 5px;

.sto-table-box {
  display: flex;
  border: 1px solid #eee;
  padding: 5px;

  .left {
    // width: 200px;
    margin-right: 1px;
    // background-color: red;

    // x y blur
    box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.5);

    input[type="checkbox"] {
      min-width: 0;
    }
  }

  .right {
    // width: 600px;
    margin-left: 2px;
    // background-color: aqua;

    // x y blur
    box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.5);

    td {
      button {
        min-width: 5rem;
        border: 1px solid #ddd;
        margin: 0 0.2rem;
        border-radius: 5px;
        font-size: 0.8rem;
        padding: 0 1.5rem;
        height: 2rem;
        outline: none;
      }

      button:hover {
        color: orangered;
        background-color: white;
      }
    }

    td.actions {
      display: flex;
      align-items: center;
      padding: 0 1rem;
    }
  }

  /* 主体表格样式 */
  .sto-table-root {
    overflow-x: auto;

    &::-webkit-scrollbar {
      // width: 0.1em;
      height: 1rem;
    }

    &::-webkit-scrollbar-track {
      background-color: #f1f1f1;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #ddd;
    }

    /* ----- */

    .table-wrapper {
      width: max-content;
    }

    /* ----- */
  }

  /* 左中右公共样式 */
  .left,
  .right,
  .sto-table-root {
    th,
    td {
      height: 3.8rem !important;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    table {
      width: 100%;
      // border: 1px solid #eee;
      border-collapse: collapse;

      thead {
        background-color: rgb(32, 58, 103);
        // x y blur spread
        // box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);

        th {
          border: 1px solid #666;
          border-bottom: 1px solid #666;

          color: white;
        }
      }

      tbody {
        tr:hover {
          background-color: #f0f0f0;

          td {
            color: orangered !important;
          }
        }
      }

      th,
      td {
        padding: 5px 2rem;
        border: 1px solid #eee;
        min-width: 5rem;
      }

      th {
        input[type="checkbox"] {
          width: 1.1rem;
          height: 1.1rem;
        }
      }

      td {
        input[type="checkbox"] {
          width: 1rem;
          height: 1rem;
        }
      }

      .selection {
        min-width: 0 !important;
        width: 4rem !important;
      }
    }
  }

  /* 左右 */
  .left,
  .right {
    border-bottom: 1rem solid #f1f1f1;
    z-index: 100;
  }

  // ==========
}
